<template>
  <div id="optIndex">
    <transition name="initial">
      <div v-if="isShow" id="introduce">
        <h1>登陆后发布众筹或梦想活动</h1>
        <input
          id="introduceInput"
          @click="release"
          value="点击确认"
          type="button"
        />
      </div>
    </transition>
    <opt v-if="isOpt"></opt>
  </div>
</template>

<script>
import opt from "./release/opt.vue";
export default {
  data() {
    return {
      isShow: true,
      isOpt: false, //显示相关
      isLogin: true //登录判断
    };
  },
  methods: {
    //点击进入
    release() {
      if (this.$store.state.isLogin) {
        console.log(this.$store.state.username);
        this.isShow = !this.isShow;
        document.getElementById("introduceInput").value = "正在进入";
        document.getElementById("introduceInput").disabled = true;
        setTimeout(() => {
          this.isOpt = !this.isOpt;
        }, 1500);
        setTimeout(() => {
          document.getElementById("optIndex").style.background = "none";
        }, 3500);
      } else {
        this.$message({
          showClose: true,
          message: "亲！你还未登录！",
          type: "warning"
        });
      }
    }
  },
  components: {
    opt
  },
  created() {}
};
</script>

<style scoped lang="scss">
.initial-leave-active#introduce {
  animation: aaa 1.5s reverse;
}
@keyframes aaa {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
  }
}

#optIndex {
  width: 85%;
  height: 80%;
  margin-bottom: 5%;
  border: 1px solid navy;
  background-image: url(../../../assets/image/dream/optIndex.jpg);
  background-size: 100% 100%;
}
#introduce {
  width: 100%;
  height: 100%;
}
#introduce h1 {
  margin-top: 10%;
}
#introduce input {
  border: none;
  background-color: transparent;
}
</style>
